<template>
  <a-drawer :open="visible" title="商品详情" @close="onClose">
    <template #closeIcon>
      <close @on-close="onClose" />
    </template>
    <a-card size="small" title="基本信息">
      <a-row>
        <a-col :span="20">
          <a-descriptions size="small" :column="3">
            <a-descriptions-item label="商品名称">
              <CopyText :text="options.goods_name">
                {{ options.goods_name }}
              </CopyText>
            </a-descriptions-item>
            <a-descriptions-item label="助记码">{{ options.memo_code }}</a-descriptions-item>
            <a-descriptions-item label="商品类型">
              <a-tag :color="options.type === 1 ? 'blue' : 'red'">
                {{ options.type === 1 ? '标品' : '非标品' }}
              </a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="商品编码">{{ options.no }}</a-descriptions-item>
            <a-descriptions-item label="品牌">{{ options.brand?.brand_name }}</a-descriptions-item>
            <a-descriptions-item label="分类">{{ options.cate?.cate_name }}</a-descriptions-item>
            <a-descriptions-item label="备注">{{ options.remark }}</a-descriptions-item>
            <a-descriptions-item label="创建者">{{ options.creator?.username }}</a-descriptions-item>
            <a-descriptions-item label="录入时间">{{ options.create_time }}</a-descriptions-item>
          </a-descriptions>
        </a-col>
        <a-col :span="4">
          <a-image :width="100" :src="options.img || failImg" />
        </a-col>
      </a-row>
    </a-card>
    <a-card class="smart-margin-top10" size="small" :tab-list="tabList" :active-tab-key="activeKey" @tabChange="(key) => (activeKey = key)">
      <template #customTab="{ tab }">
        <span class="ant-card-head-title" :style="compactModeClass">
          {{ tab }}
        </span>
      </template>
      <template v-if="activeKey === 'inventory'">
        <GoodsInventoryTable :default-type="options.default_unit_type" :spec="options.spec" />
      </template>
    </a-card>
    <template #footer>
      <a-button @click="onClose">取消</a-button>
    </template>
  </a-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import GoodsInventoryTable from './goods-inventory-table.vue'
import { inject } from 'vue'
import failImg from '@/assets/images/notice/failImg.png'
const compactModeClass = inject('compactModeClass')
defineExpose({
  showDrawer
})
const emit = defineEmits(['refresh'])

// --------------------- Drawer 显示与隐藏 ---------------------
// 是否展示
const visible = ref(false)
// 详情
const options = ref({})
// 详情tab
const activeKey = ref('inventory')
const tabList = [
  {
    key: 'inventory',
    tab: '商品明细'
  }
]

function showDrawer(item) {
  options.value = item
  visible.value = true
}

const onClose = () => {
  visible.value = false
}
</script>
